<template>
  <div class="container">
    <div class="wxkj-tab mt15">
      <el-card class="mb15">
        <div class="filter-container">
          <el-input
            v-model="listQuery.queryValue"
            placeholder="搜索同事姓名/手机/邮箱"
            clearable
            style="width: 240px;"
            class="mr20"
          />
          <el-select v-model="listQuery.status" clearable placeholder="请选择" class="mr20">
            <el-option label="正常" :value="1" />
            <el-option label="冻结" :value="2" />
          </el-select>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询
          </el-button>
        </div>
        <div class="filter-container">
          <el-button type="primary" icon="el-icon-document-add" @click="syncInfo">同步同事信息</el-button>
          <el-button type="primary" @click="disableAccount">批量冻结</el-button>
          <el-button type="primary" @click="enableAccount">解冻</el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          fit
          stripe
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="账号状态" align="center" prop="status">
            <template slot-scope="{row}">
              {{ row.status == 1 ? "正常" : "冻结" }}
            </template>
          </el-table-column>
          <el-table-column label="职位" align="center" prop="stationName" />
          <el-table-column label="邮箱" align="center" prop="email" />
          <el-table-column label="角色" align="center" prop="role_dictText" />

          <!--
                                    <el-table-column label="在线职位" align="center" prop="onlineJobCount"></el-table-column>
                                    <el-table-column label="近7天接收简历" align="center" prop="sevenCount">
                                      <template slot-scope="{row}">
                                        {{row.sevenCount || 0}}
                                      </template>
                                    </el-table-column>
                                   -->

          <!-- <el-table-column label="操作" align="center" width="163">
                                      <template slot-scope="{row}">
                                        <el-button type="text"  @click="editShow(row)">编辑</el-button>
                                      </template>
                                    </el-table-column> -->
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next, jumper"
          :page.sync="listQuery.pageNo"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </el-card>
    </div>
    <colleague-edit ref="colleagueEdit" @refresh="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import colleagueEdit from './components/colleagueEditDrawer'
import { list, mechanism, disableAccount, enableAccount } from '@/api/colleague'
import { sys_role_list } from '@/api/sys_role'
import { sys_user_queryUserRole } from '@/api/sys_user'

export default {
  components: { Pagination, colleagueEdit },
  props: {},
  data() {
    return {
      state: 0,
      query: {},
      tableKey: 0,
      list: null,
      roleList: null,
      total: 0,
      listLoading: true,
      selection: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        queryValue: ''
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRoleList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList()
  },
  // 销毁
  destroyed() {
  },
  // 方法
  methods: {
    getList() {
      this.listLoading = true
      const listQuery = JSON.parse(JSON.stringify(this.listQuery))
      list(listQuery).then(res => {
        // this.list = res.result.records;
        const list = res.result.records

        for (let i = 0; i < list.length; i++) {
          list[i].role_dictText = ''
          // let  element=list[i];
          // console.log(element);
        }
        this.listLoading = false
        this.total = res.result.total
        this.list = list
        this.initRole(this.list)
      })
    },

    getRoleList() {
      sys_role_list({ pageNo: 1, pageSize: 1000000 }).then(response => {
        const list = response.result.records
        for (let i = 0; i < list.length; i++) {
          const e = list[i]
          // if('enterprise'==e.roleCode||'admin'==e.roleCode){
          //   e.sysFlag=1;//系统内置
          //   e.sysFlag_dictText="系统内置";
          // }else{
          //   e.sysFlag=0;//
          //   e.sysFlag_dictText="自定义";
          // }
        }// end of for
        this.roleList = list
      })
    },

    initRole(list) {
      for (let i = 0; i < list.length; i++) {
        const li = list[i]
        sys_user_queryUserRole({ 'userid': li.id }).then(response2 => {
          // console.log("response2.result"+response2.result,this.roleId,response2.result.indexOf(this.roleId));
          // console.log("response2.result"+response2.result,this.roleId,response2.result.indexOf(this.roleId));
          const roleIds = response2.result
          //   console.log("roleIds"+roleIds);
          let role_dictText = ''
          for (let j = 0; j < this.roleList.length; j++) {
            const role = this.roleList[j]
            // console.log("roleIds"+roleIds,role.id,role.roleName);
            if (roleIds.indexOf(role.id) >= 0) {
              role_dictText += role.roleName + '、'
            }
          }
          // console.log("roleIds"+roleIds,role_dictText.lastIndexOf('、'),role_dictText.length);
          if (role_dictText.lastIndexOf('、') == role_dictText.length - 1) {
            role_dictText = role_dictText.substring(0, role_dictText.length - 1)
          }
          li.role_dictText = role_dictText
          list.splice(i, 1, li)
        })
      }// end of for
    },

    // 搜索
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    // 排序
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    editShow(e) {
      this.$refs.colleagueEdit.show(JSON.parse(JSON.stringify(e)))
    },
    // 同步信息
    syncInfo() {
      this.$confirm('同步时间较长，请耐心等待（关闭窗户不影响同步）', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        mechanism({}).then(res => {
          this.getList()
        })
      }).catch(() => {
      })
    },
    disableAccount() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择需要冻结的记录')
        return
      }
      this.$confirm('请确认您的操作', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableAccount(this.selection).then(res => {
          this.getList()
        })
      })
    },
    enableAccount() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择需要解冻的记录')
        return
      }
      this.$confirm('请确认您的操作', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enableAccount(this.selection).then(res => {
          this.getList()
        })
      })
    },
    selectionChange(rows) {
      if (rows) {
        this.selection = []
        rows.forEach(row => {
          this.selection.push(row.id)
        })
      }
    },
    // 转让
    transfer() {
      this.$confirm('转让后，你将失去超级管理员的权限，对应的权限将移交给TA。', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '转让成功!'
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
    .form-view {
        background: #fff;
        padding: 100px 0;

        .form {
            width: 600px;
            margin: 0 auto;
        }
    }

    .filter-container {
        line-height: 36px;
        font-size: 14px;
        margin-bottom: 10px;

        .filter-item {
            margin-bottom: 0;
        }
    }
}
</style>
